<template>
    <a-modal
      :title="title"
      :width="800"
      :ok=false
      :visible="visible"
      :confirmLoading="confirmLoading"
      :okButtonProps="{ props: {disabled: disableSubmit} }"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
  
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="目录名称"
            prop="name"
            :hidden="false"
            hasFeedback >
            <a-input id="name" placeholder="请输入目录名称" v-model="model.name"/>
          </a-form-model-item>
          <!-- <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="seen" label="上级目录" hasFeedback>
        <a-tree-select
          style="width:100%"
          :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
          :treeData="departTree"
          v-model="model.parentId"
          placeholder="请选择上级目录"
          :disabled="condition">
        </a-tree-select>
        </a-form-model-item> -->
        </a-form-model>
      </a-spin>
    </a-modal>
  </template>
  
  <script>
    import { httpAction } from '@/api/manage'
    import { queryFileTreeList } from '@/api/api'
    import pick from 'lodash.pick'
    import ATextarea from 'ant-design-vue/es/input/TextArea'
    export default {
      name: "SysDepartModal",
      components: { ATextarea },
      data () {
        return {
          departTree:[],
          orgTypeData:[],
          phoneWarning:'',
          name:"",
          title:"操作",
          seen:false,
          visible: false,
          condition:true,
          disableSubmit:false,
          model: {
            name:''
          },
          defaultModel:{
          
            type:'1'
          },
          menuhidden:false,
          menuusing:true,
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
  
          confirmLoading: false,
          validatorRules:{
            directoryName:[{ required: true, message: '请输入目录名称!' }],
            orgCode:[{ required: true, message: '请输入机构编码!' }],
            mobile: [{validator:this.validateMobile}],
            orgCategory:[{required: true, message: '请输入机构类型!'}]
          },
          url: {
            add: "/system/sysOrgFile/add",
          },
          dictDisabled:true,
        }
      },
      created () {
      },
      methods: {
        loadTreeData(){
          var that = this;
          queryFileTreeList().then((res)=>{
            if(res.success){
              that.departTree = [];
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i];
                that.departTree.push(temp);
              }
            }
  
          })
        },
        add (depart) {
          if(depart){
            this.seen = false;
            this.dictDisabled = false;
          }else{
            this.seen = true;
            this.dictDisabled = true;
          }
          this.edit(depart);
        },
        edit (record) {
            this.visible = true;
            this.model = Object.assign({}, this.defaultModel, record)
            this.loadTreeData();
            // console.log('fsg',record);
            this.model.parentId = record!=null?record.toString():null;
             
             if(this.seen){
               this.model.type = '1';
             }else{
               this.model.type = '2';
             }
        },
        close () {
          this.$emit('close');
          this.disableSubmit = false;
          this.visible = false;
          this.$refs.form.resetFields();
        },
        handleOk () {
          const that = this;
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              that.confirmLoading = true;
              
              httpAction(this.url.add,this.model,"post").then((res)=>{
                if(res.success){
                  that.$message.success(res.message);
                  that.loadTreeData();
                  that.$emit('ok');
                }else{
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
                that.close();
              })
  
            }else{
              return false;
            }
          })
        },
        handleCancel () {
          this.close()
        },
      }
    }
  </script>
  
  <style scoped>
  
  </style>